<script lang="ts" setup>
import { putSetUserInfoApi } from '@/services/my'
import { useMemberStore } from '@/stores'
import type { userInfoType } from '@/types/my'
import { Toast } from '@/utils/tools'
import { ref } from 'vue'

const memberStore = useMemberStore()
let _headImg = ref<string>()
/**选择生日 */
const changePicker = async (e: any) => {
  memberStore.userInfo!.birthday = e.target.value
  setUserInfo('birthday')
}

/** 调用微信头像 修改头像 */
const chooseAvatar = (e: any) => {
  const file_path = e.detail.avatarUrl
  const parts = file_path.split('.')
  const file_extension = parts[parts.length - 1]
  _headImg.value = `data:image/${file_extension};base64,${wx
    .getFileSystemManager()
    .readFileSync(e.detail.avatarUrl, 'base64')}`
  memberStore.userInfo!.headImg = _headImg.value // 缓存头像
  setUserInfo('headImg')
}
/**
 * * 跳转页面 传值
 * @param e   name 代表名称界面， email 代表邮箱界面
 */
const skip = (e?: string) => {
  uni.navigateTo({ url: `/pagesMy/setUserInfo/setNameEmail?type=${e}` })
}

const genderList = ref(['男', '女']) // 弹出层选择 list
/** 点击选择 性别 */
const isGende = () => {
  uni.showActionSheet({
    itemList: genderList.value,
    success: (success: UniApp.ShowActionSheetRes) => {
      console.log(genderList.value[success.tapIndex])
      memberStore.userInfo!.sex = genderList.value[success.tapIndex]
      setUserInfo('sex')
    },
  })
}
/** 修改用户信息 */
const setUserInfo = async (type: string) => {
  const param = <userInfoType>{
    id: memberStore.userInfo!.id,
    sex: memberStore.userInfo?.sex,
    headImg: _headImg.value,
    birthday: memberStore.userInfo?.birthday,
  }
  const res = await putSetUserInfoApi(param)
  res.code === 200
    ? Toast(
        type === 'sex'
          ? '性别修改成功'
          : type === 'headImg'
          ? '头像修改成功'
          : type === 'birthday'
          ? '生日修改成功'
          : '',
      )
    : Toast(
        type === 'sex'
          ? '性别修改失败'
          : type === 'headImg'
          ? '头像修改失败'
          : type === 'birthday'
          ? '生日修改失败'
          : '',
      )
}
</script>

<template>
  <view class="viewport">
    <!-- 用户信息卡片 -->
    <view class="info-card">
      <!-- 头像 -->
      <button open-type="chooseAvatar" @chooseavatar="chooseAvatar" class="info-item">
        <text class="label">头像</text>
        <view class="value-wrapper">
          <image
            class="avatar"
            :src="memberStore.userInfo?.headImg || ''"
            mode="scaleToFill"
          />
          <text class="icon-right"></text>
        </view>
      </button>

      <!-- 昵称 -->
      <button class="info-item" @tap="skip('nickName')">
        <text class="label">昵称</text>
        <view class="value-wrapper">
          <text class="value">{{ memberStore.userInfo?.nickName }}</text>
          <text class="icon-right"></text>
        </view>
      </button>

      <!-- 性别 -->
      <view @tap.stop="isGende()" class="info-item">
        <text class="label">性别</text>
        <view class="value-wrapper">
          <text class="value">{{ memberStore.userInfo?.sex }}</text>
          <text class="icon-right"></text>
        </view>
      </view>

      <!-- 生日 -->
      <view class="info-item">
        <text class="label">生日</text>
        <view class="value-wrapper">
          <picker
            mode="date"
            @change="changePicker"
            fields="day"
            :value="memberStore.userInfo?.birthday"
          >
            <text class="value">{{ memberStore.userInfo?.birthday }}</text>
            <text class="icon-right"></text>
          </picker>
        </view>
      </view>

      <!-- 邮箱 -->
      <button class="info-item" @tap="skip('email')">
        <text class="label">邮箱</text>
        <view class="value-wrapper">
          <text class="value">{{ memberStore.userInfo?.email }}</text>
          <text class="icon-right"></text>
        </view>
      </button>
    </view>

    <!-- 账号绑定卡片 -->
    <view class="bind-card">
      <navigator class="info-item" hover-class="none" url="/pagesMy/setUserInfo/setUserPhone">
        <text class="label">账号绑定</text>
        <text class="icon-right"></text>
      </navigator>
    </view>
  </view>
</template>

<style lang="scss">
page {
  background-color: #f5f5f5;
}
.viewport {
  padding: 30rpx;
}
.info-card,
.bind-card {
  background-color: #fff;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  padding: 20rpx 30rpx;
  box-shadow: 0px 2px 99px 1px rgba(0, 0, 0, 0.05);
}
.info-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 10rpx;
  background-color: #fff;

  &:last-child {
    border-bottom: none;
  }

  .label {
    font-size: 30rpx;
    color: #999;
    flex-shrink: 0;
  }

  .value-wrapper {
    display: flex;
    align-items: center;
    gap: 10rpx;
    flex: 1;
    justify-content: flex-end;
    margin-left: 20rpx;
  }

  .value {
    font-size: 30rpx;
    color: #333;
    margin-right: 10rpx;
    max-width: 400rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 10rpx;
  }

  .icon-right {
    color: #ccc;
    font-size: 24rpx;
  }
}

// 重置button默认样式
button {
  padding: 0;
  margin: 0;
  background: none;
  line-height: inherit;
  border-radius: 0;

  &::after {
    border: none;
  }
}
picker.info-item {
  position: relative;
  display: flex;
  align-items: center;
}
</style>
